<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

	<link rel="stylesheet" href="css/center.css">
	<link rel="stylesheet" href="css/menu.css">
	<link rel="stylesheet" href="css/myFansCharts.css">

	<style type="text/css">
	</style>

	<link rel="shortcut icon" href="img/mu-toutiao.ico" />

	<title>媒体号作家中心 | 粉丝画像</title>
</head>

<body>
	<div id="mainPage" class="mybody">
		<!-- 顶部白色头 -->
		<div id="whiteHeader" class="white-header">
			<div class="head_wrapper" @click="goIndex()">
				<img src="./img/imooc-news-logo.png" class="center-logo"/>

				<div class="right-me-info">
					<img :src="userInfo.face" class="me-face"/>
					<span class="me-nickname">{{userInfo.nickname}}</span>
				</div>
			</div>
		</div>
	
		<!-- 页面容器 -->
		<div class="container">
			
			<div id="all-menus" class="all-menus">
				<ul class="menu-list shadow">
					<li class="">
						<div class="menu-title-wrapper">
							<img src="img/media-ico.png" class="word-ico"/>
							<div class="menu-title">媒体中心</div>
						</div>
						<ul>
							<li class="menu-item">
								<a href="contentMng.html" class="menu-item-default" v-if="userInfo.activeStatus == 1">内容管理</a>
								<a href="javascript:void(0);" class="menu-item-default" v-if="userInfo.activeStatus == 0">内容管理</a>
							</li>
							<!-- <li class="menu-item"><a href="javascript:void(0);" class="menu-item-select">主页</a></li> -->
							<li class="menu-item">
								<a href="createArticle.html" class="menu-item-default" v-if="userInfo.activeStatus == 1">发头条</a>
								<a href="javascript:void(0);" class="menu-item-default" v-if="userInfo.activeStatus == 0">发头条</a>
							</li>
							<li class="menu-item">
								<a href="commentMng.html" class="menu-item-default" v-if="userInfo.activeStatus == 1">评论管理</a>
								<a href="javascript:void(0);" class="menu-item-default" v-if="userInfo.activeStatus == 0">评论管理</a>
							</li>
							<!-- <li class="menu-item"><a href="javascript:void(0);" class="menu-item-default">打赏记录</a></li> -->
						</ul>
					</li>
				</ul>

				<ul class="menu-list shadow">
					<li class="">
						<div class="menu-title-wrapper">
							<img src="img/user-ico.png" class="word-ico"/>
							<div class="menu-title">个人账号</div>
						</div>
						<ul>
							<li class="menu-item">
								<a href="accountInfo.html" class="menu-item-default" v-if="userInfo.activeStatus == 1">账号设置</a>
								<a href="javascript:void(0);" class="menu-item-default" v-if="userInfo.activeStatus == 0">账号设置</a>
							</li>
							<li class="menu-item">
								<a href="myFans.html" class="menu-item-default" v-if="userInfo.activeStatus == 1">我的粉丝</a>
								<a href="javascript:void(0);" class="menu-item-default" v-if="userInfo.activeStatus == 0">我的粉丝</a>
							</li>
							<li class="menu-item">
								<a href="myFansCharts.html" class="menu-item-select" v-if="userInfo.activeStatus == 1">粉丝画像</a>
								<a href="javascript:void(0);" class="menu-item-select" v-if="userInfo.activeStatus == 0">粉丝画像</a>
							</li>
							
							<!-- <li class="menu-item"><a href="javascript:void(0);" class="menu-item-default">收益提现</a></li> -->
						</ul>
					</li>
				</ul>
			</div>

			<div class="main-page">
				<div class="title-box">
					<div class="title-wrapper">
						<span class="title-word">粉丝画像</span>
					</div>
				</div>

				<div class="all-charts-wrapper">
					<div class="sex-lable">男女比例</div>
					<!-- 男女比例 -->
					<div class="sex-wrapper">

						<div class="sex-line-wrapper">
							<div class="sex-man-line" style="width: 73.2%;"></div>
							<div class="sex-woman-line" style="width: 26.8%;"></div>
						</div>

						<div class="sex-block-wrapper">
							<div class="sex-all-counts">总粉丝数：2200人</div>
							<div class="sex-man-counts"><div class="sex-man-block"></div>男性：1610人，占比 73.2%</div>
							<div class="sex-woman-counts"><div class="sex-woman-block"></div>女性：590人，占比 26.8%</div>
						</div>
					</div>
					<!-- 男女比例柱状图 -->
					<div class="histogram-wrapper">
						<div id="sexHistogram" style="width: 800px;height:500px;"></div>
					</div>
					<div class="pie-wrapper">
						<div id="sexPie" style="width: 800px;height:400px;padding: 15px;"></div>
					</div>

					<div class="city-lable">地域分布</div>
					<div class="map-wrapper">
						<div id="mapChart" style="width: 800px;height:500px;"></div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<!-- footer -->
	<div class="footer">
		<div class="all-words-wrapper">
			<a class="footer-link" href="https://www.imooc.com" target="_blank">慕课网</a>
			<span class="dian">·</span>
			<a class="footer-link" href="https://class.imooc.com/sale/javaarchitect" target="_blank">架构师体系课</a>
			<span class="dian">·</span>
			<a class="footer-link" href="https://coding.imooc.com/class/217.html" target="_blank">SpringBoot短视频实战</a>
			<span class="dian">·</span>
			<a class="footer-link" href="https://coding.imooc.com/class/261.html" target="_blank">Netty仿微信聊天实战</a>
			<span class="dian">·</span>
			<a class="footer-link" href="https://coding.imooc.com/class/201.html" target="_blank">Zookeeper入门</a>

			<span class="dian" style="font-size: 12px; margin-left: 20px;">Copyright © 2020 imooc.com All Rights Reserved</span>
		</div>
	</div>
</body>

<script src="libs/vue.min.js"></script>
<script src="libs/axios.min.js"></script>
<script src="libs/jquery-1.7.2.min.js"></script>
<script src="libs/layDate-v5.0.9/laydate/laydate.js"></script>
<script src="libs/city-picker/dist/js/city-picker.data.js"></script>
<script src="libs/city-picker/dist/js/city-picker.js"></script>
<script src="libs/echarts.min.js"></script>
<script src="libs/echarts.walden.js"></script>
<script src="libs/china.js"></script>
<!-- <script src="libs/echarts.macarons.js"></script> -->
<script src="js/app.js"></script>

<script type="text/javascript">

	var mainPage = new Vue({
		el: "#mainPage",
		data: {
			// userInfo: null,
			userInfo: {
				activeStatus: 0
			},

			page: 1, // 分页页数
			pageSize: 10, // 分页每页显示数量
			maxPage: 1, // 总页数
			total: 1, // 总记录数
		},
		mounted() {
			// 初始化图表
			this.createHistogram();
			this.createPie();
			this.createMapChart();
		},
		created() {
			// 判断用户登录
			app.judgeUserLoginStatus(this);
		},
		methods: {
			// 分页实现方法 跳转到page页
			doPaging: function (page) {
				this.page = page;
				// this.renderOrderList(this.orderStatus, page, this.pageSize);
			},
			// 根据不同地域粉丝数，在地图上展示
			createMapChart() {

				var mydata = [  
					{name: '北京',value: 1000 },{name: '天津',value: 596 },  
					{name: '上海',value: 102 },{name: '重庆',value: 6320 },  
					{name: '河北',value: 2000 },{name: '河南',value: 11057 },  
					{name: '云南',value: 23987 },{name: '辽宁',value: 1111 },  
					{name: '黑龙江',value: 15687 },{name: '湖南',value: 8693 },  
					{name: '安徽',value: 9631 },{name: '山东',value: 12143 },  
					{name: '新疆',value: 6354 },{name: '江苏',value: 1111 },  
					{name: '浙江',value: 5987 },{name: '江西',value: 4214 },  
					{name: '湖北',value: 2222 },{name: '广西',value: 3621 },  
					{name: '甘肃',value: 1047 },{name: '山西',value: 300 },  
					{name: '内蒙古',value: 1111 },{name: '陕西',value: 489 },  
					{name: '吉林',value: 600 },{name: '福建',value: 607895 },  
					{name: '贵州',value: 708 },{name: '广东',value: 63214 },  
					{name: '青海',value: 96874 },{name: '西藏',value: 120147 },  
					{name: '四川',value: 1010102 },{name: '宁夏',value: 32104 },  
					{name: '海南',value: 15978 },{name: '台湾',value: 1111 },  
					{name: '香港',value: 26874 },{name: '澳门',value: 879631 }
				];

				var optionMap = {  
					// backgroundColor: '#FFFFFF',  
					// title: {  
					// 	text: '全国地图大数据',  
					// 	subtext: '',  
					// 	x:'center'  
					// },  
					tooltip : {  
						trigger: 'item'  
					},  
					
					//左侧小导航图标
					// visualMap: {  
					// 	show : true,  
					// 	x: 'left',  
					// 	y: 'center',  
					// 	splitList: [   
					// 		{start: 50000, end:80000},{start: 80000, end: 100000},
					// 		{start: 30000, end:50000},{start: 10000, end: 30000},  
					// 		{start: 5000, end: 10000},{start: 3000, end: 5000},  
					// 		{start: 1000, end: 3000},{start: 0, end: 1000},  
					// 	],  
					// 	// color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea'] 
					// 	inRange: {
					// 			color: ['lightskyblue', 'yellow', 'orangered']
					// 	}
					// },  
					visualMap: {
						min: 1,
						max: 100000,	// 粉丝数范围，可以自定义
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea'] 
						}
					},
					
					//配置属性
					series: [{  
						name: '数据',  
						type: 'map',  
						mapType: 'china',   
						roam: true,  
						label: {  
							normal: {  
								show: true  //省份名称  
							},  
							emphasis: {  
								show: false  
							}  
						},  
						data:mydata  //数据
					}]  
				};  
				//初始化echarts实例
				var myChart = echarts.init(document.getElementById('mapChart'));

				//使用制定的配置项和数据显示图表
				myChart.setOption(optionMap);
			},
			// 创建柱状图
			createHistogram() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('sexHistogram'), 'walden');
				// 指定图表的配置项和数据
				var option = {
					title: {},
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data:['粉丝数量']
					},
					// color: ['#3fa4e6'],
					xAxis: {
						data: ["男性","女性","全部粉丝"]
					},
					yAxis: {},
					series: [{
						// name: '粉丝数量',
						type: 'bar',
						data: [1610, 590, 2200]
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
			// 饼状图
			createPie() {
				var myChart = echarts.init(document.getElementById('sexPie'), 'walden');
				option = {
					// title: {
					// 	text: '某站点用户访问来源',
					// 	subtext: '纯属虚构',
					// 	left: 'center'
					// },
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['男性比例', '女性比例']
					},
					series: [
						{
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: [
								{value: 1610, name: '男性比例'},
								{value: 590, name: '女性比例'}
							],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
				myChart.setOption(option);
			},
			// 前往首页
			goIndex() {
				window.location = app.portalIndexUrl;
			}
		}
	});

</script>

</html>